/* eslint-disable @typescript-eslint/no-unused-vars */
import { BasicForm, useForm } from "@/components/Form";
import { useTranslation } from "react-i18next";
import { staffRotationList, staffRotationDelete } from "@/api/SecondmentDictionary";
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from "@/components/Table/index";
import { useEffect, useState } from "react";
import { message } from "antd";
import Toolbar from "@/components/ViewComponents/Toolbar";
import CreateAndUpdata from "./components/createAndUpdata/index";
import { useDrawer } from "@/components/Drawer";
import { IconEnum } from "@/enums/appEnum";
let No: Number = 1;
let Size: Number = 10;
export default function staff_rotation() {
	const { t } = useTranslation();
	const [staffList, setStaffList] = useState([]);
	let btnList = [
		{
			key: "add"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.sq_numb"),
			dataIndex: "index",
			render: (text, record, index) => index * 1 + 1, // 设置序号
			width: 60
		},
		{
			title: t("felix_ui.full_name"),
			dataIndex: "fullName"
		},
		{
			title: t("felix_ui.birthday"),
			dataIndex: "birthday"
		},
		{
			title: t("felix_ui.gender"),
			dataIndex: "gender",
			render: (gender: any) => {
				if (gender == 0) return t("kevin_ui.male");
				return t("kevin_ui.female");
			}
		},
		{
			title: t("felix_ui.poz_level"),
			dataIndex: "pozLevel"
		},
		{
			title: t("felix_ui.fieldOfImplementation"),
			dataIndex: "fieldOfImplementation"
		},
		{
			title: t("felix_ui.date_from"),
			dataIndex: "dateFrom"
		},
		{
			title: t("felix_ui.date_to"),
			dataIndex: "dateTo"
		},
		{
			title: t("kevin_ui.operate"),
			width: 200,
			fixed: "right",
			render: (_, record) => {
				return (
					<TableAction
						actions={[
							{
								icon: IconEnum.EDIT,
								label: t("felix_ui.edit"),
								onClick: upData(record)
							},
							{
								icon: IconEnum.DELETE,
								label: t("felix_ui.delete"),
								popConfirm: {
									title: t("common.deleteMessage"),
									placement: "left",
									confirm: deleteFn.bind(null, record)
								}
							}
						]}
					></TableAction>
				);
			}
		}
	];
	const [registerTable, { setPagination }] = useTable({
		dataSource: staffList,
		columns,
		useSearchForm: false,
		showTableSetting: false,
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const formSchemaTop: FormSchema[] = [
		{
			label: t("felix_ui.full_name"),
			field: "fullName",
			component: "Input"
		},
		{
			label: t("felix_ui.birthday"),
			field: "birthday",
			component: "Input"
		},
		{
			label: t("felix_ui.secmt_notes"),
			field: "secmt_notes",
			component: "Input"
		}
	];
	const [formTop, { getFieldsValue: formTopValue }] = useForm({
		schemas: formSchemaTop,
		labelWidth: 80,
		autoSubmitOnEnter: true,
		showActionButtonGroup: true,
		submitFunc: () => {
			selectFn();
		},
		baseColProps: { span: 8 },
		actionColOptions: { span: 24 }
	});
	const handlerToolbarAction = (key: string) => {
		switch (key) {
			case "add":
				openDrawer(true, {
					getStaffRotation
				});
				break;
		}
	};
	const selectFn = async () => {
		const res = await formTopValue();
		getStaffRotation(res);
	};
	const timeArr = (time: any) => {
		if (!time) {
			return;
		}
		let str = "";
		time.forEach((item: any, index: number) => {
			item = item >= 10 ? item : "0" + item;
			if (index == time.length - 1) {
				str = str + item;
			} else {
				str = str + item + "-";
			}
		});
		return str;
	};
	const getStaffRotation = async (value?: object) => {
		let parameter = { pageSize: Size, pageNo: No };
		if (value) {
			parameter = {
				...parameter,
				...value
			};
		}
		const res = await staffRotationList(parameter);
		res.list.forEach((item: any) => {
			item.dateFrom = timeArr(item.dateFrom);
			item.dateTo = timeArr(item.dateTo);
			item.birthday = timeArr(item.birthday);
		});
		setPagination({
			total: res.total,
			onChange: (pageN: Number, pageS: Number) => {
				No = pageN;
				Size = pageS;
				getStaffRotation();
			}
		});
		setStaffList(res.list);
	};
	const upData = (record: any) => () => {
		openDrawer(true, {
			record,
			getStaffRotation
		});
	};
	const deleteFn = async (record: any) => {
		const res = await staffRotationDelete(record.rotaId);
		if (res) {
			message.success(t("kevin_ui.daleteSucceessfully"));
			getStaffRotation();
		}
	};
	useEffect(() => {
		getStaffRotation();
	}, []);
	return (
		<div className="page">
			<div className="page-content">
				<div className="block">
					<h3 className="block-label">Ⅰ、{t("kevin_ui.filter")}</h3>
					<div className="headerSelectForm">
						<BasicForm register={formTop}></BasicForm>
					</div>
				</div>
				<div className="block mt-2">
					<h3 className="block-label">Ⅱ、{t("kevin_ui.staffRotation")}</h3>
					<div>
						<BasicTable register={registerTable}></BasicTable>
					</div>
				</div>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			<Toolbar action={handlerToolbarAction} btnList={btnList} />
		</div>
	);
}
